<template>
  <div v-loading="reportFormLoading || getDealBaseLoading || listDealDistributionLoading || listDealSuperviseLoading" class="list-table presentation-sty">
    <el-row :gutter="20" class="child-1">
      <el-col :span="18">
        <h2>{{ $t('业绩表现与退出情况') }}</h2>
        <div ref="tableWrap" class="table_wrap">
          <table class="scroll-tab">
            <tr>
              <th rowspan="2" class="align-l">{{ $t('业绩表现') }}</th>
              <th v-for="(c,index) in result.versionList" :key="index" :colspan="result.length" class="th-h">{{ c.versionName }}</th>
            </tr>
            <tr>
              <th v-for="(c,index) in result.versionList" :key="index" class="pad-xs">
                <div class="flex-c">
                  <div v-for="(t,ind) in c.yearList" :key="ind" class="flex-1"> {{ t }}</div>
                </div>
              </th>
            </tr>
            <template v-for="s in result.subjectList">
              <tr :key="s.id" :class="{ 'bottom-bor': true }">
                <td class="name">{{ s.name }}</td>
                <td v-for="(c, index) in result.versionList" :key="index">
                  <div class="flex-c">
                    <div v-for="t in c.yearList" :key="t" class="flex-1">&nbsp;</div>
                  </div>
                </td>
              </tr>
              <tr v-for="c in s.children" :key="c.id">
                <td class="name">{{ c.name }}</td>
                <td v-for="(t,ind) in c.valueList" :key="ind">
                  <div class="flex-c">
                    <div v-for="v in t" :key="v" class="flex-1"> {{ v }}</div>
                  </div>
                </td>
              </tr>
            </template>
          </table>
        </div>

      </el-col>
      <el-col :span="6" style="height:100%;">
        <div class="select-area" style="display: flex;flex-direction: row-reverse;">

          <el-select v-model="queryParams.dealId" :placeholder="$t('项目')" filterable class="select-btn" style="width: 200px;flex-shrink: 0;" size="mini" @change="changeHandle">
            <el-option
              v-for="item in dealList"
              :key="item.id"
              :value="item.id"
              :label="item.dealName"
            />
          </el-select>
          <el-select v-model="queryParams.quarter" :placeholder="$t('季度')" clearable class="select-btn" style="width: 150px;flex-shrink: 0;padding-right: 5px" size="mini" @change="changeHandle">
            <el-option
              v-for="item in quarterList"
              :key="item"
              :value="item.key"
              :label="item.value"
            />
          </el-select>
          <el-select v-model="queryParams.year" :placeholder="$t('年份')" clearable sear class="select-btn" style="width: 150px;flex-shrink: 0;padding-right: 5px" size="mini" @change="changeHandle">
            <el-option
              v-for="item in yearList"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>

        </div>
        <div class="area-r">
          <div class="area-top align-l" style="height: 35px;">最新进展</div>
          <div class="area-bottom" :style="{height: tHeight - 35 + 'px'}">
            <dealEvent ref="dealEvent" :deal-id="queryParams.dealId" :empty="true" :quarter="queryParams.quarter" :year="queryParams.year" />
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="child-2">
          <h3>{{ $t('行动计划') }}</h3>
          <div class="area-b">
            <div class="area-top">{{ $t('将要采取的行动') }}</div>
            <div class="area-bottom">
              <template v-for="(item,index) in dealSuperviseList">
                {{ $t('事项名称') }}:{{ item.itemName }} &nbsp;&nbsp;
                {{ $t('负责人') }}:{{ item.personChargeName }} &nbsp;&nbsp;
                {{ $t('情况说明') }}:{{ item.remark }}
                <br v-if="index < dealSuperviseList.length -1" :key="item">
              </template>
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="24">
        <div class="child-2">
          <h3>{{ $t('退出计划') }}</h3>
          <table class="exit-tab">
            <tr>
              <td>{{ $t('预计退出时间') }}</td>
              <td>{{ parseTime(exitPlan.estimatedExitTime) }}</td>
            </tr>
            <tr>
              <td>{{ $t('退出方案') }}</td>
              <td>{{ exitPlan.planExit }}</td>
            </tr>
            <template v-for="(item, index) in exitPlan.distributions">
              <tr v-if="index === 0" :key="item.id">
                <td :rowspan="exitPlan.distributions.length">{{ $t('实际行动') }}</td>
                <td>
                  {{ $t('回款类型') }}: {{ selectDictLabel(distributionTypeOptions, item.distributionType) }} &nbsp;&nbsp;
                  {{ $t('回款时间') }}: {{ parseTime(item.distributionDate) }} &nbsp;&nbsp;
                  {{ $t('回款金额') }}:{{ moneyFormat(item.amountDistribution) }} {{ $t('金额单位') }} &nbsp;&nbsp;
                  {{ $t('回款后持股比例') }}: {{ item.exitShareRatio }}%
                </td>
              </tr>
              <tr v-else :key="item.id">
                <td>
                  {{ $t('回款类型') }}: {{ selectDictLabel(distributionTypeOptions, item.distributionType) }} &nbsp;&nbsp;
                  {{ $t('回款时间') }}: {{ parseTime(item.distributionDate) }} &nbsp;&nbsp;
                  {{ $t('回款金额') }}:{{ moneyFormat(item.amountDistribution) }} {{ $t('金额单位') }} &nbsp;&nbsp;
                  {{ $t('回款后持股比例') }}: {{ item.exitShareRatio }}%
                </td>
              </tr>
            </template>
          </table>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { reportForm } from '@/api/deal/predict/version/dealIndicatorPredictVersion'
import { findDeal, getDealBase } from '@/api/base/deal/dealBase'
import { findByDateAndDealId as dealDistributionFindByDateAndDealId } from '@/api/deal/distribution/dealDistribution'
import { moneyFormat } from '@/utils/ruoyi'
import { findByDateAndDealId } from '@/api/deal/supervise/dealSupervise'
import dealEvent from '@/components/dealEvent'

export default {
  components: {
    dealEvent
  },
  data() {
    return {
      selectVal: '1',
      result: {},
      exitPlan: {
        estimatedExitTime: undefined,
        planExit: undefined,
        distributions: []
      },
      // 回款类型字典
      distributionTypeOptions: [],
      // 督办事项
      dealSuperviseList: [],
      datas: {
        th: [],
        td: []
      },
      queryParams: {
        dealId: undefined,
        quarter: undefined,
        year: undefined
      },
      dealList: [],
      // 盈利预测接口
      reportFormLoading: true,
      // 退出计划接口
      getDealBaseLoading: true,
      // 回款数据接口
      listDealDistributionLoading: true,
      // 督办事项
      listDealSuperviseLoading: true,
      tHeight: 300,
      quarterList: [{ key: 1, value: '一季度' }, { key: 2, value: '二季度' }, { key: 3, value: '三季度' }, { key: 4, value: '四季度' }],
      yearList: []

    }
  },
  created() {
    this.getDicts('distribution_mode').then(response => {
      this.distributionTypeOptions = response.data
    })

    findDeal({ dealType: 'equity' }).then(res => {
      this.dealList = res.data
      if (this.dealList.length > 0) {
        this.queryParams.dealId = this.dealList[0].id
        this.changeHandle()
      }
    })

    const currentYear = new Date().getFullYear()
    for (let i = currentYear - 20; i <= currentYear + 20; i++) {
      this.yearList.push(i)
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        if (this.$refs.tableWrap && this.$refs.tableWrap?.$clientHeight !== undefined) {
          this.tHeight = this.$refs.tableWrap.clientHeight
        }
      })()
    }
  },
  methods: {
    loadH() {
      this.$nextTick(() => {
        this.tHeight = this.$refs.tableWrap.clientHeight
        console.log(this.tHeight)
      })
    },
    changeHandle() {
      // 查询盈利预测数据
      this.reportFormLoading = true
      // 查询项目退出数据
      this.getDealBaseLoading = true
      // 查询项目回款数据
      this.listDealDistributionLoading = true
      // 督办事项
      this.listDealSuperviseLoading = true

      // 查询盈利预测数据
      reportForm(this.queryParams.dealId).then(res => {
        this.result = res.data
        this.reportFormLoading = false
        this.loadH()
      })

      // 查询项目退出数据
      getDealBase(this.queryParams.dealId).then(res => {
        this.exitPlan.estimatedExitTime = res.data?.dealBaseEquity.estimatedExitTime
        this.exitPlan.planExit = res.data?.dealBaseEquity.planExit
        this.getDealBaseLoading = false
      })

      // 查询项目回款数据
      dealDistributionFindByDateAndDealId(this.queryParams).then(res => {
        this.exitPlan.distributions = res.data
        this.listDealDistributionLoading = false
      })

      // 查询督办事项
      findByDateAndDealId(this.queryParams).then(res => {
        this.dealSuperviseList = res.data
        this.listDealSuperviseLoading = false
      })
    },
    moneyFormat(val) {
      return moneyFormat(val, 'w')
    }
  }
}
</script>
